<template>
	<view>
		<view v-for="(item,index) in listData" :key="index" v-if="isShow(item)">
			<view class="item_view" @click="msgClick(item)">
				<image class="icon_img" :src="item.icon"></image>
				<view class="text_view">
					<text class="text_top">{{item.title}}</text>
					<text class="text_bottom" v-if='isIf'>{{msgContent(item)}}</text>
				</view>
			</view>
		</view>
		<view>
			<view class="item_view" @click="$goBack('/pages/dgs_qy/dtyj/dtyj')">
				<image class="icon_img" src="/static/image/dtyj.png"></image>
				<view class="text_view">
					<text class="text_top">动态预警</text>
					<text class="text_bottom" v-if="isIfDTYJ">
						{{countDTYJ?`您有${countDTYJ}消息待查看`:'暂无新消息'}}
					</text>
				</view>
			</view>
		</view>
		<tabBar :current="2" />
	</view>
</template>

<script>
	import tabBar from '@/components/tab-bar/tab-bar.vue'
	export default {
		data() {
			return {
				countList: {}, // 存储各个类型的消息数量
				isIf: false,
				isIfDTYJ: false,
				countDTYJ: 0,
			}
		},
		components: {
			tabBar
		},
		computed: {
			userRoleType() {
				return this.$store.state.userInfo.userRoleType;
			},
			listData() {
				var listData = [{
						id: 1,
						title: '新任务',
						icon: '/static/image/msg_one.png',
						userRoleType: 3,
					},
					{
						id: 2,
						title: '任务申请',
						icon: '/static/image/msg_two.png',
						userRoleType: 3,
					},
					{
						id: 3,
						title: '任务撤销',
						icon: '/static/image/msg_three.png',
						userRoleType: 3,
					},
					{
						id: 4,
						title: '企业提醒',
						icon: '/static/image/msg_four.png',
					},
					{
						id: 5,
						title: '企业内部通知',
						icon: '/static/image/icon_company_inner_notice.png'
					},
					{
						id: 6,
						title: '企业待办通知',
						icon: '/static/image/icon_company_deal_notice.png',
						userRoleType: 2,
					},
				];
				return listData;
			}
		},
		onLoad() {
			// 隐藏原生的tabbar,有自定义tabbar的页面都要写一遍
			uni.hideTabBar()
		},
		methods: {
			msgContent(item) {
				// console.log(31, this.countList)
				// let nerArr = JSON.parse(JSON.stringify(this.countList))
				// console.log(41431, nerArr)
				if (this.countList[item.id]) {
					return `您有${this.countList[item.id]}消息待查看`;
				}
				return '暂无新消息';
			},
			isShow(item) {
				return (!item.userRoleType || item.userRoleType == this.userRoleType)
			},
			msgClick(item) {
				const param = {
					msgType: item.id,
					title: item.title,
				}
				this.$goBack('./msgtask?param=' + JSON.stringify(param))
			}
		},
		mounted() {
			// console.log(this.$store.state.userInfo);
			this.$api.mgntcomsglogCount({
				targetId: this.$store.state.userInfo.empInfoId
			}).then((res) => {
				const resData = res.data.data;
				// console.log(resData)
				if (resData && resData.length)
					resData.forEach(item => {
						if (item.msgType) {
							this.countList[item.msgType] = item.count;
						}
					})
				this.isIf = true
			})
			const data = {}
			if (this.userRoleType == '3') {
				data.empInfoId = this.$store.state.userInfo.empInfoId;
			} else {
				data.ownerId = this.$store.state.userInfo.ownerId;
			}
			this.$api.warnFeedbackCount(data).then(res => {
				// console.log(res);
				this.isIfDTYJ = true;
				this.countDTYJ = res.data.data;
			})
		}
	}
</script>

<style lang="scss">
	.item_view {
		display: flex;
		border-bottom: 1rpx solid #E2E2E2;
		padding: 15rpx 0rpx 15rpx 30rpx;
		align-items: center;

		.icon_img {
			width: 120rpx;
			height: 120rpx;
		}

		.text_view {
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;

			.text_top {
				font-size: 32rpx;
				font-weight: 700;
			}

			.text_bottom {
				font-size: 28rpx;
				margin-top: 20rpx;
				color: #A0A0A0;
			}
		}
	}
</style>